import React, { Component } from 'react';
import { Link } from 'react-router-dom';
// require ('./../mock')


class Com extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dat:[]
    }
   
  }
  
  componentDidMount() {
  
    let f_name = '新秀菜谱';
    let name = JSON.stringify(f_name)
    fetch(`https://sun.daxunxun.com/api/food/type?f_type=`+name)
    .then(res => res.json())
    .then(data => {
      console.log(data)
      this.setState({
        dat: data
      })
    })
  }
  goDetail (fid){
    this.props.history.push('/detail/' + fid)

  }
  recipes_Raight (){

  }
    
  render() {
    
    let dat = this.state.dat
    // console.log( dat)
    let arr = [];
    for (var i in dat) {
      if (i<5) {
        // console.log(dat[i])
        let fid = dat[i].f_id  // 获取食物id
        arr.push(
          <li key={dat[i].f_id} onClick={ this.goDetail.bind(this, fid)}>
            <div className="NewestImg">
              <img src={dat[i].banner} alt="" />
            </div>
            {/* <div className="Recipe_spand">
              <span>
                {dat[i].name}
              </span>
            </div> */}
            <div className="_Newest_ul_li">
            <div className="_Newest_li1"><a>{dat[i].name}</a><span>步骤图</span></div>
            <div className="_Newest_li2"><span>{dat[i].ingredients}</span></div>
            <div className="_Newest_li3"><span>{dat[i].u_name}</span></div>
            </div>
          </li>
        )
      }
    }
    
    return (
     
      <div className="New_Newest">
        <div className="New_Newest_nav">
          <b>最新发布菜谱</b>
          
        </div>
        <div className="New_Newest_ul">
          <ul className="_Newest_ul">
            {/* <li>
                <img src="" alt="" className="NewestImg"/>
                <div className="_Newest_ul_li">
                    <div className="_Newest_li1"><a>鱼香肉丝</a><span>步骤图</span></div>
                    <div className="_Newest_li2"><span>瘦肉、黑木耳、胡萝卜、大萝卜、小萝卜、萝卜</span></div>
                    <div className="_Newest_li3"><span>吃唠唠</span></div>
                </div>
            </li> */}
            {
              arr
            }
        </ul>

        </div>
      
    </div>
    
  )
  }
  
}

export default Com;